(function () {
    'use strict';

    var canvas = document.getElementById('canvas');
    console.log(canvas);
    var ctx = canvas.getContext('2d');
    var earth_angel = 0;
    var moon_angel = 0;
    function draw() {
        // 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(canvas.width / 2, canvas.height / 2);
        //  绘制太阳
        ctx.beginPath();
        ctx.fillStyle = '#e67e22';
        ctx.shadowColor = '#d35400';
        ctx.shadowBlur = 10;
        ctx.arc(0, 0, 80, 0, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();
        ctx.rotate((earth_angel += 0.3) * Math.PI / 180);
        // 绘制地球
        ctx.beginPath();
        ctx.fillStyle = '#2980b9';
        // ctx.shadowColor = '#fff';
        ctx.shadowBlur = 0;
        ctx.arc(180, 0, 30, 0, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();
        ctx.translate(180, 0);
        ctx.rotate((moon_angel += 1) * Math.PI / 180);
        // 绘制月亮
        ctx.beginPath();
        ctx.fillStyle = '#bdc3c7';
        ctx.arc(50, 0, 10, 0, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();
        ctx.restore();
        requestAnimationFrame(draw);
    }

    draw();

})();
